

<template>
  <view class="Mall4j container">
    <!-- 搜索框 -->
    <view class="search-bar">
      <view class="search-box">
        <input :placeholder="i18n.enterKeywordSearch" class="sear-input" confirm-type="search" :value="prodName" @confirm="toSearchProdPage" @input="getSearchContent"></input>
        <!-- <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/search.png" class="search-img" /> -->
        <view class="search_css" @click="toSearchProdPage">
          搜索
        </view>
      </view>
      <!-- <text class="search-hint" @tap="goBackIndex">{{ i18n.cancel }}1</text> -->
    </view>

    <view class="search-display">
      <!-- 热门搜索 -->
      <view v-if="hotSearchList.length > 0" class="hot-search">
        <view class="title-text">{{ i18n.popularSearches }}</view>
        <view class="hot-search-tags">
          <block v-for="(item, index) in hotSearchList" :key="index">
            <text class="tags" :data-name="item.content" @tap="onHistSearch">{{ item.title }}</text>
          </block>
        </view>

      </view>

      <!-- 搜索历史 -->
      <view v-if="recentSearch.length > 0" class="history-search">
        <view class="title-text history-line" :style="{borderTop:(hotSearchList.length ? '2rpx solid #e1e1e1': 'none')}">{{ i18n.searchHistory }}<view class="clear-history">
            <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/clear-his.png" @tap="clearSearch" />
          </view>
        </view>
        <block v-for="(item, index) in recentSearch" :key="index">
          <view class="his-search-tags">
            <text class="tags" :data-name="item" @tap="onHistSearch">{{ item }}</text>
          </view>
        </block>
      </view>

      <view v-if="!recentSearch.length && !hotSearchList.length" class="not-found">
        <image class="not-found-img" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/not-found.png" mode="" />
        <view class="text"> {{ i18n.noData }}</view>
      </view>
    </view>
  </view>
</template>

<script>
// pages/search-page/search-page.js
var http = require('../../utils/http.js')

export default {

  components: {},
  props: {},
  data () {
    return {
      hotSearchList: [],
      prodName: '',
      recentSearch: []
    }
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 加载导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.search
    })

    var ths = this // 热门搜索

    var params = {
      url: '/search/hotSearchByShopId',
      method: 'GET',
      data: {
        number: 10,
        shopId: 1,
        sort: 1
      },
      callBack: function (res) {
        ths.setData({
          hotSearchList: res
        })
      }
    }
    http.request(params) // 获取历史搜索

    this.getRecentSearch()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.prodName = ''
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    /**
      * 获取历史搜索
      */
    getRecentSearch: function () {
      const recentSearch = uni.getStorageSync('recentSearch')
      this.setData({
        recentSearch
      })
    },

    /**
     * 搜索提交
     */
    toSearchProdPage: function () {
      if (this.prodName.trim()) {
        // 记录最近搜索
        let recentSearch = uni.getStorageSync('recentSearch') || []
        recentSearch = recentSearch.filter(item => item !== this.prodName)
        recentSearch.unshift(this.prodName)

        if (recentSearch.length > 10) {
          recentSearch.pop()
        }

        uni.setStorageSync('recentSearch', recentSearch) // 跳转到商品列表页

        uni.navigateTo({
          url: '/pages/search-prod-show/search-prod-show?prodName=' + this.prodName
        })
      } else {
        uni.showToast({
          title: this.i18n.inpKeyWords,
          icon: 'none'
        })
      }
    },

    /**
     * 清空搜索历史
     */
    clearSearch: function () {
      uni.removeStorageSync('recentSearch')
      this.getRecentSearch()
    },
    // 返回首页
    goBackIndex: function () {
      uni.navigateBack({// url: '/pages/search-page/search-page',
      })
    },
    // 输入商品名获取数据 || 绑定输入值
    getSearchContent: function (e) {
      this.setData({
        prodName: e.detail.value
      }) // this.data.prodName=e.detail.value
    },
    // 点击搜素历史
    onHistSearch: function (e) {
      var name = e.currentTarget.dataset.name
      this.setData({
        prodName: name
      })
      this.toSearchProdPage()
    }
  }
}
</script>
<style  scoped lang='scss'>
@import "./search-page.css";
page {
  background-color: #f2f2f2;
  margin: 0 auto !important;
}
.search-bar {
  padding: 30rpx;
  display: flex;
  .search-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 70rpx;
    background: #ffffff;
    border-radius: 35rpx 35rpx 35rpx 35rpx;
    display: flex;
    align-items: center;
    padding: 0 10rpx 0 40rpx;
    .sear-input {
      width: 70%;
      border: 0;
      line-height: 70rpx;
      vertical-align: top;
      font-size: 24rpx;
    }
    .search_css {
      width: 143rpx;
      height: 59rpx;
      background: linear-gradient(90deg, #ff4515 0%, #ff9610 100%);
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 35rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
      line-height: 59rpx;
    }
  }
}
</style>
